<template>
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 自定义组件，标题 -->
      <PageTitle :show-before="true">
        <template v-slot:before>
          <h2>视频招聘</h2>
        </template>
      </PageTitle>
      <el-row
        :gutter="10"
        type="flex"
        justify="space-between"
        style="margin-top: 20px"
      >
        <el-col :span="10">
          <el-row :gutter="10" type="flex">
            <el-col :span="6">
              <el-select
                placeholder="不限审核状态"
                v-model="videoListQuery.audit"
                clearable
                @change="videoAuditQuery"
              >
                <el-option
                  v-for="item in examineStatus"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="6">
              <el-select
                placeholder="不限显示状态"
                v-model="videoListQuery.isPublic"
                clearable
                @change="videoIsPublicQuery"
              >
                <el-option
                  v-for="item in showStatus"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6">
          <el-row type="flex">
            <el-col :span="6">
              <el-select
                placeholder="标题"
                v-model="videoListQuery.keyType"
                clearable
              >
                <el-option
                  v-for="item in titleOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-col>
            <el-row type="flex">
              <el-input
                clearable
                v-model="videoListQuery.keyword"
                placeholder="请输入搜索内容"
                @keyup.enter.native="selCompanyVideoList"
              ></el-input>
              <el-button type="primary" @click="selCompanyVideoList">
                <i class="el-icon-search"></i>
              </el-button>
            </el-row>
          </el-row>
        </el-col>
      </el-row>
      <!-- 数据表 -->
      <el-table
        v-loading="downloadLoading"
        tooltip-effect="dark"
        :data="videolHire"
        max-height="500px"
        style="margin-top: 20px"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" fixed align="center" />
        <el-table-column
          label="公司名称"
          align="center"
          width="width"
          prop="companyName"
          fixed
        />
        <el-table-column
          label="标题"
          align="center"
          prop="title"
          fixed
          min-width="100"
        >
          <template slot-scope="scope">
            <el-tooltip
              class="item"
              effect="dark"
              :content="scope.row.title"
              placement="top"
            >
              <div class="ellipsis-text" style="text-align: center">{{ scope.row.title }}</div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          label="浏览量"
          align="center"
          prop="viewCount"
          width="180"
        />
        <el-table-column
          label="审核状态"
          align="center"
          prop="practice_sum"
          width="120"
        >
          <template slot-scope="scope">
            <el-tag :type="getStatusType(scope.row.audit)">
              {{
                scope.row.audit === 1
                  ? "未审核"
                  : scope.row.audit === 2
                  ? "已审核"
                  : scope.row.audit === 3
                  ? "审核已通过"
                  : "未知"
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="公开状态"
          align="center"
          prop="isPublic"
          width="220"
        >
          <template slot-scope="scope">
            <el-tag :type="scope.row.isPublic === 1 ? 'success' : 'danger'">
              {{ scope.row.isPublic === 1 ? "开启" : "关闭" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          :label="$t('table.actions')"
          width="150"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button type="warning" size="small" @click="examMine(scope.row)"
              >审核</el-button
            >
            <el-button type="danger" size="small" @click="delBtn(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-row :gutter="10" style="margin-top: 20px">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage4"
          :page-sizes="[10, 20,30, 50]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          style="text-align: right"
        >
        </el-pagination>
      </el-row>
    </div>
    <el-dialog
      title="将所选信息设置为"
      :visible.sync="editAuditDialog"
      width="25%"
    >
      <div>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="审核状态">
            <el-radio-group v-model="audit">
              <el-radio :label="1">未审核</el-radio>
              <el-radio :label="2">已审核</el-radio>
              <el-radio :label="3">审核已通过</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button @click="editAuditDialog = false">取 消</el-button>
        <el-button type="primary" @click="btnOk">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  selCompanyVideoListApi,
  updateCompanyVideoByIdApi,
  delCompanyVideoByIdApi,
} from "@/api/application";
export default {
  data() {
    return {
      audit: 2,
      // 视频列表查询
      videoListQuery: {
        audit: 0,
        isPublic: 0,
        page: 1,
        pagesize: 10,
        keyType: 1,
        keyword: "",
      },
      id: "",
      editAuditDialog: false,
      downloadLoading: true,
      videolHire: [],
      examineStatus: [
        { id: 0, name: "不限审核状态" },
        { id: 1, name: "未审核" },
        { id: 2, name: "已审核" },
        { id: 3, name: "审核已通过" },
      ],
      showStatus: [
        { id: 0, name: "不限显示状态" },
        { id: 1, name: "显示" },
        { id: 2, name: "隐藏" },
      ],
      titleOptions: [
        { id: 1, name: "标题" },
        { id: 2, name: "UID" },
      ],
    };
  },
  created() {
    this.selCompanyVideoList();
  },
  methods: {
    getStatusType(audit) {
      switch (audit) {
        case 1:
          return "warning";
        case 2:
          return "success";
        case 3:
          return "success";
        default:
          return "info";
      }
    },
    // 审核状态查询
    videoAuditQuery(val) {
      console.log(val);
      this.videoListQuery.page = 1;
      this.selCompanyVideoList();
    },
    // 显示状态查询
    videoIsPublicQuery(val) {
      console.log(val);
      this.videoListQuery.page = 1;
      this.selCompanyVideoList();
    },
    // 标题查询
    videoTitleQuery(val) {
      console.log(val);
      this.selCompanyVideoList();
    },
    handleSizeChange(pageSize) {
      console.log(pageSize);
      this.videoListQuery.pagesize = pageSize;
      this.selCompanyVideoList();
    },
    handleCurrentChange(page) {
      console.log(page);
      this.videoListQuery.page = page;
      this.selCompanyVideoList();
    },
    // 视频列表查询
    async selCompanyVideoList() {
      try {
        const res = await selCompanyVideoListApi(this.videoListQuery);
        console.log(res);
        this.videolHire = res.records;
        this.total = res.total;
      } catch {
        this.$message.error("查询失败");
      } finally {
        this.downloadLoading = false;
      }
    },
    // 审核
    examMine(row) {
      console.log(row);
      this.id = row.id;
      // const res = await updateCompanyVideoByIdApi();
      this.editAuditDialog = true;
    },
    // 删除
    async delBtn(id) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          try {
            const res = await delCompanyVideoByIdApi(id);
            console.log(res);
            if (res.code === 1) {
              this.$message.success("删除成功!");
              this.selCompanyVideoList();
            } else {
              this.$message.error("删除失败");
            }
          } catch {
            this.$message.error("删除失败");
          }
        })
        .catch(() => {
          // this.$message({
          //   type: "info",
          //   message: "已取消删除",
          // });
        });
    },
    // 提交
    async btnOk() {
      try {
        const res = await updateCompanyVideoByIdApi(this.audit, this.id);
        console.log(res);
        if (res.code === 1) {
          this.$message.success("审核成功!");
          this.editAuditDialog = false;
          this.selCompanyVideoList();
        } else {
          this.$message.error("审核失败");
        }
      } catch {
        this.$message.error("审核失败");
      }
    },
    handleSelectionChange(selection) {
      console.log(selection);
    },
  },
};
</script>

<style lang="scss" scoped>
.ellipsis-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
  cursor: pointer;
  color: #409EFF;
  margin: 0 auto;
  display: inline-block;
}
</style>
